<template>
  <div>
    <Banner />
    <div class="musicListBox">
      <div class="musicListLeft">
        <PopularRecommendation />
      </div>
      <div class="musicListRight">
        <RightLogin />
        <ResidentSingers />
        <Anchor />
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "./Banner";
import PopularRecommendation from "./PopularRecommendation";
import ResidentSingers from "./ResidentSingers";
import RightLogin from "./rightLogin";
import Anchor from "@/components/Anchor";
export default {
  components: {
    Banner,
    PopularRecommendation,
    ResidentSingers,
    RightLogin,
    Anchor,
  },
};
</script>

<style lang="scss" scoped>
.musicListBox {
  width: 980px;
  margin: 0 auto;
  display: flex;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
}
.musicListLeft {
  width: 728px;
  border-right: 1px solid #d3d3d3;
}
.musicListRight {
  width: 250px;
}
</style>